<template>
  <div>
    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
      :that="prop.that"
    >
      <template slot="top_operate" slot-scope="currentRow">

      </template>

      <template slot="columns">

        <el-table-column align="center" show-overflow-tooltip prop="deleted" label="是否已删除">
          <template slot-scope="scope">
          <el-tag v-if="scope.row.deleted" size="mini" type="danger">已删除</el-tag>
          <el-tag v-else size="mini" type="success">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="articleNo" label="文章编号"/>
        <el-table-column align="center" show-overflow-tooltip prop="userName" label="评论人"/>
        <el-table-column align="center" show-overflow-tooltip prop="content" label="评论内容"/>
        <el-table-column align="center" show-overflow-tooltip prop="id" label="评论编号"/>
        <el-table-column align="center" show-overflow-tooltip prop="parentId" label="父评论编号"/>
        <el-table-column align="center" width="120" show-overflow-tooltip prop="directParentId" label="直接父评论编号">
          <template slot-scope="scope">{{ (scope.row.directParentId===''||scope.row.directParentId===null) ?'-':  scope.row.directParentId }}</template>
        </el-table-column>

        <el-table-column align="center" show-overflow-tooltip prop="goodCount" label="点赞数量"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="sonCount" label="子评论数量"></el-table-column>

        <el-table-column align="center" show-overflow-tooltip prop="replyUserName" label="回复谁">
          <template slot-scope="scope">{{ (scope.row.replyUserName!=null && scope.row.replyUserName!=='') ? scope.row.replyUserName : '-' }}</template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <auth :code="permission.remove">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-delete"
                  type="text"
                  @click="del(scope.row.commentNo)"
                  size="mini"
                  slot="auth"
                >删除
                </el-button
                >
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
import utils from "../../../../utils/CommonUtils.js";
import formUtils from "../../../../utils/form.js";
import {Loading} from 'element-ui';

export default {
  data() {
    return {
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 文章管理 / 评论列表",
        getDataUrl: "/comment/pageList",
        removeUrl: "",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: false,
        isPage: true,
        delBtnPermission: "comment:del",
        that: this,
      },

      permission: {
        remove: "comment:del",
      },

      URL: {
        remove:"/comment/delete/?"
      },
    };
  },
  created() {
  },
  methods: {

    reqResult(res) {
      this.dialog.visible = false;
      this.setDataToForm(null);
    },

    del(id) {
      formUtils.delete(this, this.URL.remove.replace("?", id), true, "", res=>{
        this.reloadTable();
      })
    },

    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    }
    ,monitorRowExpandChange(res) {
      if(res.expand){
        let loading = Loading.service({});
        loading.close();
      }
    }
  },
};
</script>
<style>
</style>
<style scoped>
.operate-btn {
  margin: 0 5px;
}

</style>
